<template>
  <div id="category">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item><a href="/home">首页</a></el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <el-row>
        <el-col>
          <el-button type="primary">添加分类</el-button>
        </el-col>
      </el-row>

      <!-- 表格区域 -->
      <el-row>
        <vxe-toolbar>
            <template v-slot:buttons>
                <vxe-button @click="allAlign = 'left'">居左</vxe-button>
                <vxe-button @click="allAlign = 'center'">居中</vxe-button>
                <vxe-button @click="allAlign = 'right'">居右</vxe-button>
            </template>
        </vxe-toolbar>
 
        <vxe-table
                border
                show-header-overflow
                show-overflow
                highlight-hover-row
                :align="allAlign"
                :data="tableData">
            <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
            <vxe-table-column field="name" title="姓名"></vxe-table-column>
            <vxe-table-column field="sex" title="性别"></vxe-table-column>
            <vxe-table-column field="age" title="年龄"></vxe-table-column>
        </vxe-table>
      </el-row>

      <!-- 分页区域 -->
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'category',
  data() {
    return {
      categoryList: [],
      allAlign: "center",
      tableData: [
          {id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'vxe-table 从入门到放弃'},
          {id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou'},
          {id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai'},
          {id: 10004, name: 'Test4', role: 'Designer', sex: 'Women ', age: 24, address: 'Shanghai'}
      ]

    }
  },
  created() {
    this.getCategoryList()
  },
  methods: {
    async getCategoryList() {
      const { data: res } = await this.$http.get('categories')
      if (res.meta.status !== 200) {
        return this.$message.error('初始化商品分类数据失败！')
      }
      this.categoryList = res.data
    },
  },
}
</script>

<style lang="less" scoped>
.el-button {
  margin: 15px 0;
}
</style>
